<template>
  <a-modal width="480px" v-model="visible" @cancel="cancel">
    <div slot="title" class="title">
      <span>{{ isEdit ? $t('subject.autotext40') : $t('all.autotext292') }}</span>
    </div>
    <a-form-model
      v-if="visible"
      :label-col="{ span: 6 }"
      :wrapper-col="{ span: 15 }"
      ref="ruleForm"
      :model="form"
      :rules="rules"
    >
      <div class="type-change" v-if="isEdit">
        <a-button type="primary" @click="changeType">{{ type === 1 ? $t('subject.autotext41') : $t('subject.autotext42') }}</a-button>
      </div>
      <template v-if="type === 2">
        <a-form-model-item :label="`${$t('all.autotext1750')} ID`" prop="digitalNumber">
          <a-input v-model="form.digitalNumber" style="width: 100%" @change="cardNumChange" />
        </a-form-model-item>
      </template>
      <template v-else>
        <a-form-model-item :label="$t('all.autotext976')" prop="bankCardNo">
          <a-input
            v-model="form.bankCardNo"
            :placeholder="this.$t('subject.autotext38')"
            style="width: 100%"
            @change="cardNumChange"
          />
        </a-form-model-item>
      </template>
      <template>
        <a-form-model-item :label="$t('all.autotext497')"  v-if="type===1">
          {{ bankInfo.bankName || '-' }}
        </a-form-model-item>
        <a-form-model-item :label="$t('all.autotext497')" v-else>
          {{ bankInfo.digitalName || '-' }}
        </a-form-model-item>
        <a-form-model-item :label="$t('all.autotext508')" prop="bankAccount" v-if="type===1">
          <a-select v-model="form.bankAccount">
            <a-select-option v-for="item in persons" :key="item" :value="item">
              {{ item }}
            </a-select-option>
          </a-select>
        </a-form-model-item>
        <a-form-model-item :label="$t('all.autotext20')" prop="bankOpenInfo" v-if="type===1">
          <a-input v-model="form.bankOpenInfo" :placeholder="this.$t('all.autotext380')" />
        </a-form-model-item>
      </template>
    </a-form-model>
    <a-tooltip placement="bottom" v-if="type === 2">
      <template slot="title">
        <div class="tip">
          <div class="tip-text">{{ $t('all.autotext1776') }}</div>
          <div class="tip-text">{{ $t('all.autotext1777') }}</div>
          <div class="tip-text">{{ $t('all.autotext1778') }}</div>
          <div class="tip-text">{{ $t('all.autotext1779') }}</div>
        </div>
      </template>
      <a-button type="link">
        {{ $t('all.autotext1752') }}
        <a-icon type="question-circle" style="margin-top: 10px;" />
      </a-button>
    </a-tooltip>
    
    <div slot="footer" class="dialog-footer">
      <a-button @click="cancel">{{ $t('all.autotext975') }}</a-button>
      <a-button type="primary" @click="submit">{{ $t('all.autotext49') }}</a-button>
    </div>
  </a-modal>
</template>

<script>
import modalMixin from '@/utils/modal.mixin'
import { apiGetSubBankName, addBank, updateBank, checkBank, antiCheckForDigitalCoin } from '@/api/account/user'

export default {
  props: ['pts'],
  mixins: [modalMixin],
  data () {
    return {
      id: null,
      visible: false,
      type: 1,
      form: {
        digitalNumber: '',
        bankCardNo: '',
        bankAccount: '',
        bankOpenInfo: ''
      },
      bankInfo: {
        bankName: '',
        digitalName: ''
      },
      rules: {
        digitalNumber: [
          { required: true, message: this.$t('all.autotext711'), trigger: 'blur' },
          { pattern: /^(\d{16})$/, message: this.$t('all.autotext1754') }
        ],
        bankCardNo: [
          { required: true, message: this.$t('all.autotext711'), trigger: 'blur' },
          { pattern: /^(\d{16}|\d{19}|\d{18}|\d{17})$/, message: this.$t('all.autotext1360') }
        ],
        bankAccount: [{ required: true, message: this.$t('all.autotext711'), trigger: 'change' }],
        bankOpenInfo: [{ required: true, message: this.$t('all.autotext711'), trigger: 'blur' }]
      },
      flag: true,
      persons: [],
      isEdit: false
    }
  },
  methods: {
    open (e, item) {
      this.type = e
      this.isEdit = !!item
      if (item) {
        this.id = item.id
        if (e === 1) {
          this.form.bankCardNo = item.bankCardNo
          this.bankInfo.bankName = item.bankName
        } else {
          this.form.digitalNumber = item.bankCardNo
          this.bankInfo.digitalName = item.bankName
        }
        this.form.bankAccount = item.bankAccount
        this.form.bankOpenInfo = item.bankOpenInfo
        this.bankInfo.backImgUrl = item.logoUrl
      } else {
        this.id = null
      }
      this.persons = [this.pts.ptsName]
      if (this.pts.proManagePtsGuardian) this.persons.push(this.pts.proManagePtsGuardian.ptsName)
      this.visible = true
      this.$nextTick(() => {
        this.$refs.ruleForm?.clearValidate()
      })
    },
    submit () {
      this.$refs.ruleForm.validate(async valid => {
        if (!valid) return
        if (!this.flag) return
        if ((this.type === 1 && !this.bankInfo.bankName) || (this.type === 2 && !this.bankInfo.digitalName)) {
          this.$message.error(this.type === 1 ? this.$t('all.autotext1360') : this.$t('all.autotext1754'))
          return
        }
        this.flag = false
        try {
          if (this.type === 1) {
            await checkBank({
              bankCard: this.form.bankCardNo,
              name: this.form.bankAccount
            })
          }
          const params = {
            id: this.id,
            bankCardNo: this.form.bankCardNo || this.form.digitalNumber,
            bankAccount: this.form.bankAccount,
            bankOpenInfo: this.form.bankOpenInfo,
            bankName: this.type === 1 ? this.bankInfo.bankName : this.bankInfo.digitalName,
            logoUrl: this.bankInfo.backImgUrl,
            type: 2,
            bankType: this.type,
            userAuthorizeId: this.pts.userAuthorizeId,
            ptsId: this.pts.id
          }
          
          if (this.isEdit) {
            await updateBank(params)
          } else {
            await addBank(params)
          }
          this.flag = true
          this.cancel()
          this.$message.success(this.$t('all.autotext470'))
          this.$emit('refresh')
        } catch (err) {
          this.flag = true
        }
      })
    },
    cancel () {
      this.form = {
        digitalNumber: '',
        bankCardNo: '',
        bankAccount: '',
        bankOpenInfo: ''
      }
      this.$refs.ruleForm.resetFields()
      this.$refs.ruleForm.clearValidate()
      this.bankInfo = {
        bankName: '',
        digitalName: ''
      }
      this.visible = false
    },
    async cardNumChange () {
      if (this.type === 1) {
        if (/^(\d{16}|\d{19}|\d{18}|\d{17})$/.test(this.form.bankCardNo)) {
          const res = await apiGetSubBankName({ ptsId: this.pts.id, bankcard: this.form.bankCardNo })
          this.bankInfo = res
        }
      } else {
        if (/^(\d{16})$/.test(this.form.digitalNumber)) {
          const res = await antiCheckForDigitalCoin({ bankNo: this.form.digitalNumber })
          if (!res) {
            this.bankInfo.digitalName = ''
            return
          }
          this.bankInfo.digitalName = res
        }
      }
    },
    changeType () {
      this.bankInfo = {
        bankName: '',
        digitalName: ''
      }
      this.form = {
        digitalNumber: '',
        bankCardNo: '',
        bankAccount: '',
        bankOpenInfo: ''
      }
      this.$refs.ruleForm.resetFields()
      if (this.type === 1) {
        this.type = 2
      } else {
        this.type = 1
      }
    }
  }
}
</script>

<style lang="less" scoped>
.type-change {
  text-align: right;
  margin-bottom: 20px;
}
.tip {
  .tip-text {
    margin: 10px 10px;
  }
}
</style>
